<template>
  <div class="my-card">
    <div class="toolbar">
      <DatePicker
        :options="options"
        :getData="getData"
        :defaultDate="defaultDate"
      >
      </DatePicker>
    </div>
    <v-chart class="chartBox" :options="lineOption"/>
    <!-- <DashboardHistory
      slot="main"
      :devices="devices"
    ></DashboardHistory> -->
    <el-container style="display:flex;flex-direction:column;">
        <el-table
          :data="tapData"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
          >
          <el-table-column
            prop="time"
            label="时间"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="waterLevel"
            label="水位(m)"
            sortable>
          </el-table-column>
        </el-table>
      </el-container>
  </div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/gauge'
import echartsCommonOptions from '../../../config/echartsCommonOptions'
import { defaultsDeep } from 'lodash'
import moment from 'moment'
import axios from 'axios'
import DatePicker from '../../../components/DatePicker.vue'
import DashboardHistory from '../../Monitor/History'
import { getCleanWaterData } from '../../model'

export default {
  data () {
    return {
      defaultDate: [moment().subtract(1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      devices: [],
      tapData: [],
      // tapData: [
      //   {
      //     time: '2018/10/1',
      //     waterLevel: 2.5
      //   },
      //   {
      //     time: '2018/10/2',
      //     waterLevel: 1.9
      //   },
      //   {
      //     time: '2018/10/3',
      //     waterLevel: 2.1
      //   }
      // ],
      options: [{
        text: '最近一月',
        range: [moment().subtract(1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      }, {
        text: '最近一年',
        range: [moment().subtract(1, 'y').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      }],
      valueId: '',
      dialogVisible: false,
      tableData: [],
      lineOption: {},
      gaugeOption: {},
      tapOpenDegree: ''
    }
  },
  components: {
    'v-chart': ECharts,
    DatePicker,
    DashboardHistory
  },
  mounted () {
    this.getData(this.defaultDate)
	console.log("test");
  },
  methods: {
    initEchart () {
      this.lineOption = defaultsDeep({
        dataset: [{
          source: this.tapData
        }],
        yAxis: {
          name: '水位（m）'
        },
        series: [
          {
            name: '阀门状态',
            type: 'line',
            markPoint: {
              symbolSize: 40,
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            }
          }
        ]
      }, echartsCommonOptions.lineOptions)
    },
    getData (date) {
      let params = {
        cleanWaterPondsId: '2',
        startTime: moment(date[0]).format('x'),
        endTime: moment(date[1]).format('x')
      }
      getCleanWaterData(params).then(res => {
        this.tapData = res.data.data.historyData
        this.initEchart()
      })
    }
  }
}
</script>

<style lang="sass" scoped>
/deep/ .el-dialog__body
  text-align: center;
.my-card
  width: 100%;
  background-color: #fff;
  padding: 15px;
  margin: 10px;
  .gauge-chart
    width: 300px;
    height: 200px;
  .toolbar
    position: relative;
    .my-btn
      position: absolute;
      top: 0;
      right: 0;
      margin: 0 10px;
  .dialogform
    padding: 16px
  .chartBox
    height: 350px;
    width: 100%;
  /deep/ .el-date-editor
    width: 350px;
    justify-content: space-between;
</style>
